

<script>
import Journal from './Journal'
import { thistle } from 'color-name';
export default {
    name: 'AvieDetail',
    components: {
        Journal
    },
    render () {
        let arr = this.tabList.filter(item => item.show == true)
        let tabs = () => {
            if(arr.length > 1) {
                return (
                    <el-tabs
                        vModel={this.active}
                        type="card"
                        class={`${this.typeClass === 'nomarl' ? 'Avie_tabs_nomarl' :'Avie_tabs_tips'} Avie_tabs_normal_user`}
                        on={{ 'tab-click': this.tabClick }}
                    >
                        {
                            arr.map(item => {
                                return <el-tab-pane
                                    label={item.name}
                                    name={item.type}
                                    lazy
                                ></el-tab-pane>
                            })
                        }
                    </el-tabs>
                )
            } else {
                return
            }
        }
        let journal = () => {
            if (this.haveHandle) {
                return (
                    <div class="Avie_table_box detail" style={this.active =='Journal' ? 'display:flex' : 'display:none'}>
                        <Journal targetId={this.targetId} />
                    </div>
                )
            } else {
                return
            }
        }
        return (
            <div class="defaule_detail">
                {tabs()}
                <div class="Avie_normal_sample detail_box">
                    {
                        arr.map(item => {
                            return (
                                <div class="Avie_table_box detail" style={this.active == item.type ? 'display:flex' : 'display:none'}>
                                    {this.$slots[item.type]}
                                </div>
                            )
                        })
                    }
                    {
                        journal()
                    }
                </div>
            </div>
        )
    },
    props: {
        tabList: {
            type: Array,
            default: () => {
                return [
                    {
                        name: '互动内容',
                        type: 'detail',
                        show: true
                    },
                    {
                        name: '操作日记',
                        type: 'Journal',
                        show: true
                    }
                ]
            }
        },
        targetId: {
            type: String,
            default: ''
        },
        typeClass: {
            type: String,
            default: 'nomarl'
        }
    },
    data() {
        return {
            active: this.tabList[0].type
        }
    },
    computed: {
        haveHandle() {
            let arr = this.tabList.filter(item => item.show == true && item.type == 'Journal')
            if (arr && arr.length > 0) {
                return true
            } else {
                return false
            }
        },
    },
    methods: {
        tabClick () {
            console.log('tabClick', this.active)
            this.$emit('tabClick', this.active)
        }
    }
}
</script>

<style lang="scss" scoped>
.defaule_detail{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.detail{
    flex: 1;
    display: flex;
    &>div{
        flex: 1;
        display: flex;
        flex-direction: column;
    }
}
</style>